<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>内网穿透</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">

<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/bootstrapValidator.min.css}">
<link rel="stylesheet" th:href="@{/css/bootstrap-datetimepicker.css}">


<!-- Font Awesome -->
<link rel="stylesheet" th:href="@{/css/font-awesome.css}">
<!-- Ionicons -->
<link rel="stylesheet" th:href="@{/css/ionicons.css}">
<!-- Theme style -->
<link rel="stylesheet" th:href="@{/css/AdminLTE.css}">
<link rel="stylesheet" th:href="@{/css/skins/skin-blue.min.css}">

<link rel="stylesheet" th:href="@{/easyui/themes/bootstrap/easyui.css}">
<link rel="stylesheet" th:href="@{/easyui/themes/icon.css}">
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/easyui/jquery.easyui.min.js}"></script>

<link th:href="@{/css/bootstrap-table.css}" rel="stylesheet">
<link th:href="@{/css/jquery.treegrid.css}" rel="stylesheet">
<link th:href="@{/css/bootstrap-tab.css}" rel="stylesheet">
<link th:href="@{/css/myCommon.css}" rel="stylesheet">


<script th:src="@{/js/jquery.form.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/adminlte.js}"></script>

<script th:src="@{/js/bootstrapValidator.min.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker.zh-TW.js}"></script>

<script th:src="@{/js/bootstrap-table.js}"></script>
<script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/js/bootstrap-table-treegrid.js}"></script>
<script th:src="@{/js/jquery.treegrid.min.js}"></script>

<script th:src="@{/js/bootstrap-tab.js}"></script>

<script th:src="@{/js/bootstrap-table-export.js}"></script>
<script th:src="@{/js/tableExport.min.js}"></script>
<script th:src="@{/js/FileSaver.min.js}"></script>
<script th:src="@{/js/xlsx.core.min.js}"></script>

<script>
	$(function() {
		$.extend($.fn.validatebox.defaults.rules, {
			/*必须和某个字段相等*/
			equalTo : {
				validator : function(value, param) {
					return $(param[0]).val() == value;
				},
				message : '两次密码不相同'
			}

		});
	});

	function indexEditPassword() {
		$("#index-editpasswordDialog-form").form('clear');
		$('#index-editpasswordDialog')
				.dialog(
						{
							buttons : [ {
								text : '提交',
								handler : function() {
									$("#index-editpasswordDialog-form")
											.form(
													'submit',
													{
														url : '/editPassword',
														onSubmit : function() {
															//表单验证
															return $(
																	"#index-editpasswordDialog-form")
																	.form(
																			'validate')
														},
														success : function(
																result) {
															var result = JSON
																	.parse(result);
															if (result.retCod != '1000') {
																$.messager
																		.alert(
																				'错误',
																				result.retMsg,
																				'error');
																return;
															}
															$(
																	'#index-editpasswordDialog')
																	.dialog(
																			'close');
														}
													});
								}
							} ]
						});
		$('#index-editpasswordDialog').dialog('open');
	}
</script>

</head>

<body class="hold-transition skin-blue sidebar-mini">
	<div id="index-editpasswordDialog" class="easyui-dialog" title="修改密码"
		data-options="iconCls:'icon-edit',resizable:true,modal:true,closed:true,cache:false">
		<form id="index-editpasswordDialog-form" method="post">
			<table
				style="margin: 10px; border-collapse: separate; border-spacing: 5px 5px;">
				<tr>
					<td style="text-align: right;">原密码：</td>
					<td><input name="oldPassword" class="easyui-passwordbox"
						data-options="required:true,showEye:true" style="width: 200px"></td>
				</tr>
				<tr>
					<td style="text-align: right;">新密码：</td>
					<td><input id="index-editpasswordDialog-form-password" name="newPassword" class="easyui-passwordbox"
						data-options="required:true,showEye:true" style="width: 200px"></td>
				</tr>
				<tr>
					<td style="text-align: right;">确认密码：</td>
					<td><input class="easyui-passwordbox"
						data-options="required:true,showEye:true" validType="equalTo['#index-editpasswordDialog-form-password']" style="width: 200px"></td>
				</tr>
			</table>
		</form>
	</div>
	<div class="wrapper">

		<!-- Main Header -->
		<header class="main-header">

			<!-- Logo -->
			<a href="#" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>Natcross</b> control</span> <!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Welcome</b> natcross control</span>
			</a>

			<!-- Header Navbar -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="push-menu"
					role="button"> <span class="sr-only">Toggle navigation</span>
				</a>
				<!-- Navbar Right Menu -->
				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- User Account Menu -->
						<li class="dropdown user user-menu">
							<!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle"
							data-toggle="dropdown"> <!-- The user img in the navbar--> <img
								th:src="@{/img/1.png}" class="user-image" alt="User Image">
								<!-- hidden-xs hides the username on small devices so only the img appears. -->
								<span class="hidden-xs" th:text="${userName}">登录用户名</span>
						</a>
							<ul class="dropdown-menu">
								<!-- The user img in the menu -->
								<li class="user-header"><img th:src="@{/img/1.png}"
									class="img-circle" alt="User Image">
									<p>
										<span th:text="${userName}">登录用户名</span> <small
											th:text="${nickName}">用户昵称</small>
									</p></li>
								<!-- Menu Footer-->
								<li class="user-footer">
									<div class="pull-left">
										<a class="btn btn-default btn-flat"
											onclick="indexEditPassword();">修改密码</a>
									</div>
									<div class="pull-right">
										<a th:href="@{/logout}" class="btn btn-default btn-flat">登出</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">

			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">

				<!-- Sidebar user panel (optional) -->
				<div class="user-panel">
					<div class="pull-left image">
						<img th:src="@{/img/1.png}" class="img-circle" alt="User Image">
					</div>
					<div class="pull-left info">
						<p th:text="${userName}">登录用户名</p>
						<!-- Status -->
						<i class="fa fa-circle text-success">Online</i>
					</div>
				</div>

				<!-- Sidebar Menu -->
				<ul class="sidebar-menu" data-widget="tree">
					<li class="header"><span class="fa-lg">系统菜单</span></li>
					<!-- Optionally, you can add icons to the links -->

					<li><a class="myLeftMenu" th:href="@{/natcross/natcrossList}">内网穿透列表</a></li>

				</ul>
				<!-- /.sidebar-menu -->
			</section>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<!--<section class="content-header">-->
			<!--<h1>-->
			<!--Page Header-->
			<!--<small>Optional description</small>-->
			<!--</h1>-->
			<!--<ol class="breadcrumb">-->
			<!--<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>-->
			<!--<li class="active">Here</li>-->
			<!--</ol>-->
			<!--</section>-->

			<!-- Main content -->
			<section class="content container-fluid">
				<div id="container">自定义的内网穿透工具</div>

				<!--------------------------
              | Your Page Content Here |
              -------------------------->

			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		<footer class="main-footer">
			<!-- To the right -->
			<div class="pull-right hidden-xs">welcome</div>
			<!-- Default to the left -->
			<strong>person.pluto</strong>
		</footer>

		<!-- Add the sidebar's background. This div must be placed
    immediately after the control sidebar -->
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- ./wrapper -->

	<script>
		$(function() {
			$('#container').load("/html/welcome.html");
			$('ul.sidebar-menu li').click(function() {
				var li = $('ul.sidebar-menu li.active');
				li.removeClass('active');
				$(this).addClass('active');
			});

			$('.myLeftMenu').click(function(e) {
				e.preventDefault();
				var url = $(this).attr('href');
				console.log(url);
				$('#container').load(url);

			});
		})
	</script>

	<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
</html>